<template>
	<view class="content">
		<view class="img_name"> 
			<van-image
			  round
			  width="60"
			  height="60"
			  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
			/>
			<view>
				{{user.username || '这就是测试的啊啊啊'}}
			</view>
		</view>
		<van-form @submit="onSubmit">
		  <van-cell-group inset>
		    <van-field
		      v-model="user.username"
		      name="username"
		      label="用户名"
		      placeholder="用户名"
		      :rules="[{ required: true, message: '请填写用户名' }]"
		    />
		    <van-field
		      v-model="user.password"
		      type="password"
		      name="password"
		      label="密码"
		      placeholder="密码"
		      :rules="[{ required: true, message: '请填写密码' }]"
		    />
			<van-field
			  v-model="user.tel"
			  name="tel"
			  label="手机号"
			  placeholder="手机号"
			  :rules="[{ required: true, message: '请填写手机号' }]"
			/>
			<van-field
			  v-model="user.email"
			  name="email"
			  label="邮箱"
			  placeholder="邮箱"	
			/>
		  </van-cell-group>
		  <div style="margin: 16px;">
		    <van-button round block plain type="primary" native-type="submit">
		      提交
		    </van-button>
		  </div>
		</van-form>
	</view>
</template>

<script>
import { onMounted, reactive,ref } from 'vue';
	export default {
		setup(){
			 const user = ref({
				 username:'',
				 password:'',
				 tel:'',
				 email:''
				 
			 });
			 
			const onSubmit = (values) =>{
				uni.setStorageSync('user',values)
				 uni.navigateBack();
			}
			
			onMounted(() =>{
				if(uni.getStorageSync('user')){
					user.value = uni.getStorageSync('user')
				}
			})
			
			return{
				user,
				onSubmit
			}
		}
	}
</script>

<style scoped lang="scss">
	.content{
		background-color: rgb(247, 248, 250);
	}
	.img_name{
		text-align: center;
		padding: 45px 0;
	}

</style>
